<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        body,html {
            background: white;
        }
        .main {
            width: 940px;
            margin: 0 auto;
            border: 1px solid #f2f2f2;

            height: 500px;
        }

        .main_left {
            width: 390px;
            height: 500px;
            float: left;
            /* background: #f2f2f2; */
        }

        .ml_img {
            width: 300px;
            height: 400px;
            border: 1px solid rgba(0, 0, 0, 0.07);
            float: left;
            position: relative;
            margin-top: 20px;
            margin-left: 45px;
        }

        .ml_img img {
            width: 300px;
            height: 400px;
        }

        .main_right {
            width: 540px;
            height: 500px;
            border: 1px solid #f2f2f2;
            float: right;
            /* padding-left: 10px; */
        }

        h3 {
            min-height: 21px;
            font-size: 16px;
            font-weight: 700;
            line-height: 21px;
            color: #3C3C3C;
            padding-left: 10px;
            margin-top: 50px;
        }

        .comment {
            margin-top: 30px;
            padding-left: 10px;
        }

        .price {
            position: relative;
            min-height: 35px;
            zoom: 1;
            padding: 10px;
            background-color: #FFF2E8;
            margin-top: 10px;
        }

        .price span {
            display: inline;
            float: left;
            width: 60px;
            color: #6c6c6c;
        }

        .price strong {
            position: relative;
            top: -2px;
            vertical-align: middle;
            padding-right: 5px;
            font-size: 24px;
            font-weight: 700;
            font-family: Tahoma, Arial, Helvetica, sans-serif;
            color: #f40;
            overflow: hidden;
        }

        .btns {
            /* margin-top: 20px; */
            margin-top: 140px;
        }

        .btns a {
            display: block;
            cursor: pointer;
            width: 134px;
            height: 38px;
            text-align: center;
            font-family: "Hiragino Sans GB", "microsoft yahei", sans-serif;
            font-size: 16px;
            line-height: 38px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px;
        }

        .btns_left {
            float: left;
            margin-left: 10px;
        }

        .btns_right {
            float: left;
            margin-left: 10px;
        }

        .btns .btns_left a {
            color: #E5511D;
            border-color: #F0CAB6;
            background: #FFE4D0;
        }

        .btns .btns_right a {
            width: 180px;
            color: #FFF;
            border-color: #F40;
            background: #F40;
        }
    </style>
</head>

<body>

    <div class="header1">
        <div class="logo">
            <a href="./index.html">
                <img src="http://www.nrgou.com/App/Tpl/Home/nrgou/Public/img/logo.png" alt="">
            </a>
        </div>
        <div class="search_right">
            <div class="sr1">
                <p>搜宝贝</p>
            </div>
            <form action="" class="search_form">
                <input class="sousuoka" type="text" placeholder="宝贝、专辑...">
                <input class="btn" type="submit">
            </form>
        </div>
    </div>

    <div class="main">
        <!-- <div class="main_left">
            <div class="ml_img">
                <a href="">
                    <img src="./img/1.jpg" alt="">
                </a>
            </div>
        </div>
        <div class="main_right">
            <h3>超大麋鹿头饰发箍仙女森系超仙发窟可爱仙美节日发饰铃铛毛球头箍</h3>
            <div class="comment">
                <img src="http://img.alicdn.com/tps/TB1uibqKpXXXXXjXXXXXXXXXXXX-80-14.png" alt="">海量新品 潮流穿搭 玩趣互动
            </div>
            <div class="price">
                <span>价格</span>
                <strong>
                    <em>￥</em>
                    <em>9.90</em>
                </strong>
            </div>
            <div class="btns">
                <div class="btns_left fl">
                    <a href="">立即购买</a>
                </div>
                <div class="btns_right fl">
                    <a href="">加入购物车</a>
                </div>
            </div>
        </div> -->
    </div>

</body>
<script src="./js/jquery-1.11.0.js"></script>
<script>
    var pid = location.search.split("=")[1];
    $.get("http://jx.xuzhixiang.top/ap/api/detail.php", {
        id: pid
    }).then(data => {
        console.log(data);
        $(".main").html(
            `
            <div class="main_left">
                <div class="ml_img">
                    <a href="">
                        <img src="${data.data.pimg}" alt="">
                    </a>
                </div>
            </div>
            <div class="main_right">
                <h3>${data.data.pname}</h3>
                <div class="comment">
                    <img src="http://img.alicdn.com/tps/TB1uibqKpXXXXXjXXXXXXXXXXXX-80-14.png" alt="">海量新品 潮流穿搭 玩趣互动
                </div>
                <div class="price">
                    <span>价格</span>
                    <strong>
                        <em>￥</em>
                        <em>${data.data.pprice}</em>
                    </strong>
                </div>
                <div class="btns">
                    <div class="btns_left fl">
                        <a href="">立即购买</a>
                    </div>
                    <div class="btns_right fl">
                        <a href="" class="cart">加入购物车</a>
                    </div>
                </div>
            </div>
            `
        );
        //点击添加购物车按钮，调用接口
        $(".cart").click(function () {
            $.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                uid: data.data.uid,
                pid: data.data.pid,
                pnum: 1
            }).then(data => {
                // console.log(data);
                location.href = "cart.html";
            });
        });
    });
</script>

</html>